﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <input type="text" ng-model="someProperty" placeholder="TypetoEnable">
    <button ng-model="button" ng-disabled="!someProperty">AButton</button>
    <br />
    <textarea ng-disabled="isDisabled">Wait5seconds</textarea>
    <br />
    <label>Select Two Fish:</label>
    <input type="checkbox"
           ng-model="isTwoFish"><br />
    <select>
        <option>One Fish</option>
        <option ng-selected="isTwoFish">Two Fish</option>
    </select>
    <br />
    <input type="text" ng-model="person.name" />
    <div ng-switch on="person.name">
        <p ng-switch-default>And the winner is</p>
        <h1 ng-switch-when="Ari">{{ person.name }}</h1>
    </div>
    <br />
    <input type="checkbox" ng-model="person.name" />
    <input type="text" ng-model="person.name" ng-init="person.name=true" />
    <div ng-if="person.name">你在说什么IF</div>
    <div ng-show="person.name">你在说什么SHOW</div>
    <div ng-hide="person.name" ng-init="greeting='HelloWorld'">
        你在说什么HIDE
        <p ng-bind="greeting"></p>
        <p ng-cloak>{{ greeting }}</p>
    </div>
    <br />
    <div ng-bind-template="{{greeting}}{{person.name}}">
    </div>
    <br />
    <ul ng-controller="PeopleController">
        <li ng-repeat="person in people" ng-class="{even: $even, odd: $odd}">
            {{person.name}} lives in {{person.city}}
        </li>
    </ul>

    <br />
    <div ng-controller="EquationController">
        <input type="text" ng-model="equation.x" ng-change="change()" />
        <code>{{ equation.output }}</code>
    </div>

    <br />
    <form name="signup_form"
          ng-controller="FormController"
          ng-submit="submitForm()" novalidate>
        <div ng-repeat="field in fields"
             ng-form="signup_form_input">
            <input type="text"
                   name="dynamic_input"
                   ng-required="field.isRequired"
                   ng-model="field.name"
                   placeholder="{{field.placeholder}}" />
            <div ng-show="signup_form_input.dynamic_input.$dirty &&signup_form_input.dynamic_input.$invalid">
                <span class="error">
                    The field is required.
                </span>
            </div>
        </div>
        <button type="submit"
                ng-disabled="signup_form.$invalid">
            Submit All
        </button>
    </form>
    <br />
    <div ng-controller="CounterController">
        <button ng-click="count = count + 1"
                ng-init="count=0">
            Increment
        </button>
        count: {{ count }}
        <button ng-click="decrement()">
            Decrement
        </button>
        </div>
    <div ng-controller="CityController">
        <select ng-model="city"  ng-options="city.name for city in cities">
            <option value="">Choose City</option>
        </select>
        Best City: {{ city.name }}
    </div>
    <br />
    <div ng-controller="LotteryController">
        <!--<div ng-class="{red: x > 5}" >-->
        <div ng-class="getColor()" >
      
            You won!
        </div>
        <button ng-click="x = generateNumber()"   ng-init="x = 0">
            Draw Number
        </button>
        <p>Number is: {{ x }}</p>
    </div>
</body>

</html>
<style>
    .odd {
background-color: blue;
}
.even {
background-color: red;
}
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
.red {
background-color: red;
}
.yellow{
    background-color: yellow;
}
</style>
<script>
    angular.module('myApp', []);
    var app=   angular.module('myApp');


    app.run(function ($rootScope, $timeout) {
    $rootScope.isDisabled = true;
    $timeout(function () {
        $rootScope.isDisabled = false;
    }, 5000);
});
    //ng-repeat
    app.controller('PeopleController',function($scope) {
        $scope.people = [
        {name: "Ari", city: "San Francisco"},
        { name: "Erik", city: "Seattle" },
         { name: "z", city: "SH" },
          { name: "X", city: "BJ" },
           { name: "H", city: "SZ" }
        ];
    });
    //ng-change
    app.controller('EquationController', function ($scope) {
        $scope.equation = {};
        $scope.change = function () {
            $scope.equation.output
            = parseInt($scope.equation.x) + 2;
        };
    });


    app.controller('CounterController', function ($scope) {
    $scope.decrement = function () {
        $scope.count = $scope.count - 1;
    };
})

    
    app.controller('FormController', function ($scope) {
    $scope.fields = [
    { placeholder: 'Username', isRequired: true },
    { placeholder: 'Password', isRequired: true },
    { placeholder: 'Email (optional)', isRequired: false }
    ];
    $scope.submitForm = function () {
        alert("it works!");
    };
    });


    app.controller('CityController',function($scope) {
        $scope.cities = [
        {name: 'Seattle'},
        {name: 'San Francisco'},
        {name: 'Chicago'},
        {name: 'New York'},
        {name: 'Boston'}
        ];
    });

    app.controller('LotteryController', function($scope) {
        $scope.generateNumber = function() {
            return Math.floor(Math.random() * 10);
        };
        $scope.getColor = function () {
          //  console.log(Math.floor(Math.random() * 10)%2);
            return Math.floor(Math.random() * 10) % 2 == 0 ? "red" : "yellow";
        };
    });

</script>